<style>
  body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
  /* Page reset */
  margin:0px;
  padding:0px;
}

body{
  /* Setting default text color, background and a font stack */
  color:#444444;
  font-size:13px;
  background: #f2f2f2;
  font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
  /* CSS3 Box Shadow */
  -moz-box-shadow:0 0 3px #AAAAAA;
  -webkit-box-shadow:0 0 3px #AAAAAA;
  box-shadow:0 0 3px #AAAAAA;
  
  /* CSS3 Rounded Corners */
  
  -moz-border-radius-bottomleft:4px;
  -webkit-border-bottom-left-radius:4px;
  border-bottom-left-radius:4px;
  
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
  
  border:1px solid white;
  
  background:url(css/menu/galleryimg/panel.jpg) repeat-x bottom center #ffffff;
  
  /* The width of the gallery */
  width:920px;
  overflow:hidden;
}

#slides{
  /* This is the slide area */
  height:400px;
  
  /* jQuery changes the width later on to the sum of the widths of all the slides. */
  width:920px;
  overflow:hidden;
}

.slide{
  float:left;
}

#galleryMenu{
  /* This is the container for the thumbnails */
  height:45px;
}

#galleryMenu ul{
  margin:0px;
  padding:0px;
}

#galleryMenu ul li{
  /* Every thumbnail is a li element */
  width:60px;
  display:inline-block;
  list-style:none;
  height:45px;
  overflow:hidden;
}

#galleryMenu ul li.inact:hover{
  /* The inactive state, highlighted on mouse over */
  background:url(css/menu/galleryimg/pic_bg.png) repeat;
}

#galleryMenu ul li.act,#galleryMenu ul li.act:hover{
  /* The active state of the thumb */
  background:url(css/menu/galleryimg/active_bg.png) no-repeat;
}

#galleryMenu ul li.act a{
  cursor:default;
}

.fbar{
  /* The left-most vertical bar, next to the first thumbnail */
  width:2px;
  background:url(css/menu/galleryimg/divider.png) no-repeat right;
}

#galleryMenu ul li a{
  display:block;
  background:url(css/menu/galleryimg/divider.png) no-repeat right;
  height:35px;
  padding-top:10px;
}

a img{
  border:none;
}


/* The styles below are only necessary for the demo page */

h1{
  font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  font-size:36px;
  font-weight:normal;
  margin-bottom:15px;
}

h2{
  font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:normal;
  position:absolute;
  right:0;
  text-transform:uppercase;
  top:15px;
}

#galleryMain{
  /* The galleryMain container */
  margin:15px auto;
  text-align:center;
  width:920px;
  position:relative;
}

a, a:visited {
  color:#0196e3;
  text-decoration:none;
  outline:none;
}

a:hover{
  text-decoration:underline;
}

p{
  padding:10px;
  text-align:center;
}

</style>
<div id="galleryMain">

  <div id="gallery">
  
      <div class="slide">
        <div>
          <script>
            var roomStyles = [];

          </script>
          <?php
            if($house){
            $i=0;
            foreach ($house as $h){
          ?>
          <script>
            $("<?php echo '#'.$h->_id?>").click(function(event){
            	console.warn(<?php echo json_encode($h)?>);
            <?php 
            //echo "buildHouse('".$h->_id."',roomStyles[$(this).attr('alt')]);"
            	
              	echo "loadHouse(" . json_encode($h) . ");";
              
            ?>
              $.fancybox.close();
              });
          </script>
          <img class='housetype' id="<?php echo $h->_id?>"src="thumbs/macbook.jpg" width="230" height="100" alt="<?php echo $i?>" />
          <?php $i++;
            }}
          ?><img class='housetype'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
          <img class='housetype'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
        </div>
  
    
    <!--<div class="slide"><img src="thumbs/macbook.jpg" width="920" height="400" alt="side" /></div>-->
    <div class="slide"><img src="thumbs/iphone.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="thumbs/imac.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide">
      <a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank">
        <img src="thumbs/info.jpg" width="920" height="400" alt="side" /></a></div>
      
    </div>
    
    <div id="galleryMenu">
    
    <ul>
        <li class="fbar">&nbsp;</li>
        <li class="menuItem">
          <a href="110000">一室一厅</a>
        </li>
        <li class="menuItem">
          <a href="210000">两室一厅</a>
        </li>
        <li class="menuItem">
          <a href="311000">三室一厅一卫</a>
        </li>
        <li class="menuItem">
          <a href="321000">三室两厅一卫</a>
        </li>
        <li class="menuItem">
          <a href="322000">三室两厅两卫</a>
        </li>
    </ul>
    
    
    </div>
    
  </div>
    
</div>
<script>
  
  $(document).ready(function(){
  /* This code is executed after the DOM has been completely loaded */
  
  var totWidth=0;
  var positions = new Array();
  
  $('#slides .slide').each(function(i){
    
    /* Traverse through all the slides and store their accumulative widths in totWidth */
    
    positions[i]= totWidth;
    totWidth += $('#galleryMain').width();
    
    /* The positions array contains each slide's commulutative offset from the left part of the container */
    
    if(!$('#galleryMain').width())
    {
      alert("Please, fill in width & height for all your images!");
      return false;
    }
    
  });
  
  $('#slides').width(totWidth);

  /* Change the cotnainer div's width to the exact width of all the slides combined */

  $('#galleryMenu ul li a').click(function(e,keepScroll){

      /* On a thumbnail click */

      $('li.menuItem').removeClass('act').addClass('inact');
      $(this).parent().addClass('act');
      
      var pos = $(this).parent().prevAll('.menuItem').length;
      
      $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
      /* Start the sliding animation */
      
      e.preventDefault();
      /* Prevent the default action of the link */
      
      
      // Stopping the auto-advance if an icon has been clicked:
      if(!keepScroll) clearInterval(itvl);
  });
  
  $('#galleryMenu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
  /* On page load, mark the first thumbnail as active */
  
  
  
  /*****
   *
   *  Enabling auto-advance.
   *
   ****/
   
  var current=1;
  function autoAdvance()
  {
    if(current==-1) return false;
    
    $('#galleryMenu ul li a').eq(current%$('#galleryMenu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
    current++;
  }

  // The number of seconds that the slider will auto-advance in:
  
  var changeEvery = 10;

  var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

  /* End of customizations */
});
</script>
